<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="顾宁一的个人博客。" />
    <meta name="author" content="顾宁一" />
    <title>顾-主页</title>
    <link rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="../css/dark-mode.css" id="dark-mode-style" />
    <link rel="icon" href="../img/ico.jpg" type="image/jpeg" />
  </head>
  <body>
    <header>
      <h1>顾宁一的博客</h1>
      <nav>
        <ul>
          <li><a href="index.html">主页</a></li>
          <li><a href="about.html">关于</a></li>
          <button id="mode-toggle-button">黑夜/白昼</button>
        </ul>
      </nav>
    </header>
    <main>
      <div class="posts">
        <!-- 使用JavaScript生成文章列表 -->
      </div>
      <div class="qq-icon-container">
        <a
          href="https://qm.qq.com/cgi-bin/qm/qr?k=zFAoMkq9KxswHUiSjPnpRi9xfc_j9BXG&jump_from=webapi&authKey=YqbHxxQYEjHKnheTIpDucq6iUOo+3Vc5YBAJcMuavy0iAALwCMwXXrg7OziFFEwY"
          target="_blank"
        >
          <img  alt="QQ图标" class="qq-icon" />
        </a>
      </div>
    </main>
    <script>
      // 获取目录wen下的目录
      fetch('wen/')
        .then(response => response.text())
        .then(data => {
          const postDirs = data.split('\n');
          const postsContainer = document.querySelector('.posts');

          postDirs.forEach(dir => {
            const postLink = `wen/${dir}/index`;
            const postTitle = `wen/${dir}/wen.txt`;
            const postExcerpt = `wen/${dir}/wen2.txt`;
            const postImage = `wen/${dir}/img/1.png`;

            fetch(postTitle)
              .then(response => response.text())
              .then(title => {
                fetch(postExcerpt)
                  .then(response => response.text())
                  .then(excerpt => {
                    const postElement = document.createElement('a');
                    postElement.href = postLink;
                    postElement.classList.add('post-link');

                    const postDiv = document.createElement('div');
                    postDiv.classList.add('post');

                    const titleElement = document.createElement('h2');
                    titleElement.textContent = title;

                    const excerptElement = document.createElement('p');
                    excerptElement.textContent = excerpt;

                    const imageElement = document.createElement('img');
                    imageElement.src = postImage;
                    imageElement.alt = '文章图片';
                    imageElement.classList.add('index-image');

                    const dateElement = document.createElement('p');
                    dateElement.textContent = dir;

                    postDiv.appendChild(titleElement);
                    postDiv.appendChild(excerptElement);
                    postDiv.appendChild(imageElement);
                    postDiv.appendChild(dateElement);

                    postElement.appendChild(postDiv);
                    postsContainer.appendChild(postElement);
                  });
              });
          });
        });
    </script>
  </body>
</html>
